<template>
  <div class="tab-box">
    <div class="arrow-left" @click="onLeftClick">
      <img src="./img/type_3_left.png" :style="`height:${tab_item_height}px;`" alt />
    </div>
    <div class="tab-slide" :style="`width:${tab_slide_width}px;`">
      <div class="tab-item-box" ref="tab-item-box" :style="`transform:translateX(-${translate}px)`">
        <div
          v-for="(item,index) in tabArr"
          :class="['tab-item',{'active':index==tabKey}]"
          :key="index"
          :style="`min-width:${tab_item_width}px;margin-right:${tabItemEdgeDistance}px;height:${tab_item_height}px;`"
          @click="onClick(index)"
          :ref="`tab_item_${index}`"
        >
          <span>{{item}}</span>
        </div>
      </div>
    </div>
    <div class="arrow-right" @click="onRightClick">
      <img src="./img/type_3_right.png" :style="`height:${tab_item_height}px;`" alt />
      <!-- <div class="shadow"></div> -->
    </div>
  </div>
</template>
<script>
import myMixin from "../index";
export default {
  name: "data-tabType-third",
  mixins:[myMixin],
};
</script>
<style lang="less" src='./index.less' scoped></style>